<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="动态详情抽屉"
    width="40%"
    :loading="true"
    loadingText="数据加载中..."
  >
    <p>用户参数:{{ receiveParams }}</p>
    <p>加载的数据:{{ dynamicData }}</p>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  // 接收父组件传的参数
  let receiveParams = ref({});

  // 接收动态加载的数据
  let dynamicData = ref({});

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, {setDrawerProps}] = useDrawerInner((data) => {
    // 保存接收到的参数
    receiveParams = data;
    // 动态加载数据
    loadData(data);
  })

  // 加载数据
  function loadData(data) {
    // 此时还没有
    dynamicData.value = '发起网络请求，加载数据, 请求id:' + data.id;

    // 模拟3秒耗时
    setTimeout(() => {
      // 关闭 loading 动画
      setDrawerProps({loading:false});
      // 更新数据
      dynamicData.value = '详情加载成功';
    }, 3000);
  }

</script>
